import Base from "../base.js";
import schedulesApi from "../../api/schedules.js";
import moviesApi from "../../api/movies.js";
import cinemasApi from "../../api/cinemas.js";
import theaterApi from "../../api/theaters.js";
export default class extends Base {
  data = {
    schedules: {
      movieId: "",
      cinemasId: "",
      theaterId: "",
      showDate: "",
      showTime: "",
      price: "",
    },
    movies: [],
    cinemas: [],
    theater: [],
  };
  render() {
    this.$el.html(`
    <h1 style="text-align:center">新增排片</h1>
    <div style="padding: 10px;width:1200px;margin:auto;margin-left:520px">
      选择电影 <select name="cityMovies" style="margin-left:24px;width:200px;height:36px;margin-bottom:10px;border-color:#e6e6e6;" >
        <option value="">请选择电影</option>
      </select>
    </div>
    <div style="padding: 10px;width:1200px;margin:auto;margin-left:520px">
      选择影院 <select name="cityCin" style="margin-left:24px;width:200px;height:36px;margin-bottom:10px;border-color:#e6e6e6;">
        <option value="">请选择影院</option>
      </select>
    </div>
    <div style="padding: 10px;width:1200px;margin:auto;margin-left:520px">
      选择放映厅<select name="cityTheater" style="margin-left:14px;width:200px;height:36px;margin-bottom:10px;border-color:#e6e6e6;">
      <option value="">请选择放映厅</option>  
      </select>
    </div> 
    <div class="layui-form-item" style="padding: 10px;width:1200px;margin:auto;margin-left:495px">
      <label class="layui-form-label">日期</label>
      <div class="layui-input-inline">
        <input type="text" name="data" id="test1" value="" required lay-verify="required" autocomplete="off" class="layui-input" style="width:200px; margin-left: 28px;">
      </div>
    </div> 
    <div class="layui-form-item" style="padding: 10px;width:1200px;margin:auto;margin-left:495px">
      <label class="layui-form-label">时间</label>
      <div class="layui-input-inline">
        <input type="text" name="time" id="test2" value="" required lay-verify="required" autocomplete="off" class="layui-input" style="width:200px; margin-left: 28px;">
      </div>
    </div> 
    <div class="layui-form-item" style="padding: 10px;width:1200px;margin:auto;margin-left:495px">
      <label class="layui-form-label">价格</label>
      <div class="layui-input-inline">
        <input type="text" name="price" value="" required lay-verify="required" autocomplete="off" class="layui-input" style="width:200px; margin-left: 28px; ">
      </div>
    </div> 
    <div class="layui-form-item" style="padding: 10px;width:1200px;margin:auto;margin-left:495px">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formReg">保存</button>
      </div>
    </div>
  `);
    laydate.render({
      elem: "#test1",
    });
    laydate.render({
      elem: "#test2",
      type: "time",
    });
    this.cityMovies = $("select[name=cityMovies]");
    this.cityCin = $("select[name=cityCin]");
    this.cityTheater = $("select[name=cityTheater]");
    this.dataEle = $("#test1");
    this.timeEle = $("#test2");
    this.priceEle = $("input[name=price]");
    this.buttonBtn = $(".layui-btn");
  }

  async mounted() {
    await this.getInfo();
    this.rerender();
  }
  //获取信息
  async getInfo() {
    // 获取所有电影
    this.data.movies = await moviesApi.getall();
    // 获取所有影院
    this.data.cinemas = await cinemasApi.getall();
    this.rerender();
  }

  async create() {
    // console.log(this.data.schedules);
    console.log(this.data.schedules);
    this.data.schedules = await schedulesApi.create(this.data.schedules);
    if (this.data.schedules._id) {
      layer.msg(
        "新增成功",
        {
          icon: 1,
          time: 1500, //2秒关闭（如果不配置，默认是3秒）
        },
        function () {
          location.hash = "#/info/schedules";
        }
      );
    } else {
      layer.msg("新增失败", {
        icon: 1,
        time: 1500,
      });
    }
  }

  // 获取影院下存在的放映厅并显示在页面上
  async search(cinemasId) {
    console.log(this.data.theater);
    this.data.theater = await theaterApi.searchTheater(cinemasId);
    const options2 = _.map(this.data.theater, (item) => {
      return ` <option value="${item._id}">${item.name}</option>`;
    }).join("");
    this.cityTheater.html(options2).val();
  }

  async rerender() {
    // 获取电影数据并显示在页面上
    const [currentMovies] = this.data.movies;
    // console.log(currentMovies._id);
    const options = _.map(this.data.movies, (item) => {
      return ` <option value="${item._id}">${item.cname}</option>`;
    }).join("");
    this.cityMovies.html(options).val(currentMovies._id);
    this.data.schedules.movieId = currentMovies._id;
    // console.log(currentMovies._id);
    // 获取影院数据并显示在页面上
    const [currentCinemas] = this.data.cinemas;
    const options1 = _.map(this.data.cinemas, (item) => {
      // console.log(item._id);
      return ` <option value="${item._id}">${item.name}</option>`;
    }).join("");
    this.cityCin.html(options1).val(currentCinemas._id);
    // this.data.schedules.cinemasId = currentCinemas._id;
    this.data.schedules.cinemasId = this.data.cinemas[0]._id;
    // console.log(this.data.cinemas);
    // console.log(this.data.movies);
    // console.log(this.data.theater);
    //获取放映厅数据并显示在页面上
    let theatersData = await theaterApi.getMany(this.data.cinemas[0]._id);
    // console.log(theatersData);
    this.data.theater=theatersData;
    console.log(this.data.theater);
    this.data.schedules.theaterId=this.data.theater[0]._id
    const options2 = _.map(this.data.theater, (item) => {
      return ` <option value="${item._id}">${item.name}</option>`;
    }).join("");
    this.cityTheater.html(options2).val();
    // this.cityTheater.val(this.data.theater[0].name)
  }

  handle() {
    this.cityMovies.on("change", (e) => {
      console.log(e.target.value);
      this.data.schedules.movieId = e.target.value;
    });
    this.cityCin.on("change", (e) => {
      // console.log(e.target.value);
      this.data.schedules.cinemasId = e.target.value;
      this.search(this.data.schedules.cinemasId);
    });
    this.cityTheater.on("change", (e) => {
      // console.log(e.target.value);
      this.data.schedules.theaterId = e.target.value;
    });
    // this.dataEle.on("input",e=>{
    //   this.data.schedules.showDate = e.target.value;
    // })
    // this.timeEle.on("input",e=>{
    //   this.data.schedules.showTime = e.target.value;
    // })
    this.priceEle.on("input", (e) => {
      this.data.schedules.showDate = this.dataEle.val();
      this.data.schedules.showTime = this.timeEle.val();
      this.data.schedules.price = e.target.value;
    });
    this.buttonBtn.on("click", this.create.bind(this));
  }
}
